<script setup>
import { ref, onMounted } from 'vue';
import { Search } from '@element-plus/icons-vue';
import { identifyResult } from '@/utils/api.js'
import { useRouter } from 'vue-router'
let areaId = '';
const router = useRouter();
const totalElements = ref(0);
let pageNum = 1;
const rblist = ref([]);
const currentPage = ref(1);
const keywords = ref('');
const handleSizeChange = (val) => {
    pageNum = val;
    getidentifyResult();
};

const scc = () => {
    pageNum = 1;
    currentPage.value = 1;
    getidentifyResult()
}

const getidentifyResult = async () => {
    let params = '?areaId=' + areaId + '&keywords=' + keywords.value + '&pageNum=' + pageNum + '&pageSize=10';
    let res = await identifyResult(params)
    if (res.code == '200') {
        rblist.value = res.data.content;
        totalElements.value = res.data.totalElements;
    }
}

const gorede = (data) => {
    let name = '鉴定结果', species = data.speciesName;
    let result = {
        pageNum: pageNum,
        currentPage: currentPage.value,
        keywords: keywords.value
    }
    window.sessionStorage.setItem('result', JSON.stringify(result));
    router.push({ path: '/result/details', query: { name: name, species: species } })
}

onMounted(() => {
    areaId = window.sessionStorage.getItem('areaId');
    setTimeout(function () {
        if (window.sessionStorage.getItem('result') != null) {
            let data = JSON.parse(window.sessionStorage.getItem('result'));
            keywords.value = data.keywords;
            pageNum = data.pageNum;
            currentPage.value = data.currentPage;
            getidentifyResult();
            window.sessionStorage.removeItem('result')
        } else {
            getidentifyResult();
        }
    }, 500)
})

</script>
<template>
    <div class="wls-aut">
        <div class="wls-aut-title">
            <div style="font-weight: 700;"><span>鉴定结果</span></div>
        </div>
        <div class="wls-aut-container">
            <div class="bcb">
                <el-row :gutter="20">
                    <el-col :span="6">
                        <el-input v-model="keywords" style="width: 100%;" size="large" placeholder="搜索物种名"
                            class="input-with-select">
                            <template #append>
                                <el-button @click.stop="scc()" :icon="Search" />
                            </template>
                        </el-input>
                    </el-col>
                </el-row>
                <div style="height: 0.16rem;"></div>
                <table>
                    <thead>
                        <tr style="border: none;">
                            <!-- <th>图标</th> -->
                            <th>物种名称</th>
                            <th>拉丁名</th>
                            <th>拍摄数量 </th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for="(i, index) in rblist" :key="i.id">
                            <td>
                                {{ i.speciesName }}
                            </td>
                            <td class="italic-text">{{ i.latinName }}</td>
                            <td>{{ i.count }}</td>
                            <td>
                                <span @click="gorede(i)" style="color: var(--wls-color);margin-right: 0.16rem;">查看</span>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>

        <el-pagination v-model:current-page="currentPage" :page-size="10" :small="true" :disabled="false" background
            layout="total, prev, pager, next, jumper" :total="totalElements" @current-change="handleSizeChange" />
    </div>
</template>
<style scoped>
.wls-rb {
    width: 100%;
    height: 0.66rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.wls-rb img {
    width: 0.6rem;
    height: 0.6rem;
}

th,
td {
    width: 25%;
}
</style>